<template>
  <div>
    <header>
      <div class="top">
        <img
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          alt=""
        />
        <div class="con">
          <h3>{{ data.userList.account }}</h3>
          <van-icon name="printer" />
        </div>
      </div>
      <ul>
        <li>
          <p>{{ data.userList.collectionNumber }}</p>
          <p>收藏</p>
        </li>
        <li>
          <p>{{ data.userList.likeNumber }}</p>
          <p>关注</p>
        </li>
        <li>
          <p>{{ data.userList.score }}</p>
          <p>积分</p>
        </li>
        <li>
          <p>{{ data.userList.couponNumber }}</p>
          <p>优惠券</p>
        </li>
      </ul>
    </header>
    <nav>
      <div class="navtop">
        <h3>药品订单</h3>
        <p style="color: #ac9797">全部订单></p>
      </div>
      <ul>
        <li>
          <p><van-icon name="card" /></p>
          <p>待付款</p>
        </li>
        <li>
          <p><van-icon name="send-gift" /></p>
          <p>待发货</p>
        </li>
        <li>
          <p><van-icon name="clock" /></p>
          <p>待收货</p>
        </li>
        <li>
          <p><van-icon name="checked" /></p>
          <p>已完成</p>
        </li>
      </ul>
    </nav>
    <footer>
      <h3>快捷工具</h3>
      <ul>
        <li v-for="item,i in data.listIcon" :key="i">
          <van-icon :name="item.icon" /><span>{{item.name}}</span
          ><span class="r"><van-icon id="rIcon" name="arrow" /></span>
        </li>
      </ul>
    </footer>
    <a id="outlogin" href="###" @click="outL">退出登录</a>
  </div>
</template>

<script leng="ts" setup>
import { userInfo } from '../utils/api'
import { ref, reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const data = reactive({
  userList: {},
  listIcon: [
    {
      icon: 'chat',
      name: '我的问诊'
    },
    {
      icon: 'column',
      name: '我的处方'
    },
    {
      icon: 'todo-list',
      name: '家庭档案'
    },
    {
      icon: 'map-marked',
      name: '地址管理'
    },
    {
      icon: 'column',
      name: '我的评价'
    },
    {
      icon: 'service',
      name: '官方客服'
    },
    {
      icon: 'setting',
      name: '设置'
    }
  ]
})

userInfo().then((res) => {
  console.log(res)
  data.userList = res.data
})

const outL = () => {
  // 清空本地
  localStorage.removeItem('UserInfo')
  // 跳转登录页
  router.push('login')

  showSuccessToast('退出登录成功!!!')
}
</script>

<style scoped lang='scss'>
body,
html {
  padding-bottom: 60px;
}
header {
  color: #000;
  background: linear-gradient(#9ad9d3, #f2f6f7);
  width: 100%;
  height: 200px;
  padding: 60px 20px 20px 20px;
  .top {
    display: flex;

    img {
      border-radius: 50%;
      width: 70px;
      height: 70px;
      margin-right: 10px;
    }
  }
  ul {
    display: flex;
    margin-top: 10px;
    li {
      flex: 1;
      p {
        text-align: center;
      }
      p:nth-child(1) {
        font-size: 18px;
      }
      p:nth-child(2) {
        font-size: 12px;
        color: #ac9797;
      }
    }
  }
}
nav {
  margin: 20px;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  color: #000;
  .navtop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    h3 {
      font-weight: 700;
    }
  }
  ul {
    width: 100%;
    display: flex;
    li {
      flex: 1;
      text-align: center;
      p:nth-child(1) {
        font-size: 22px;
      }
      p:nth-child(2) {
        font-size: 12px;
      }
    }
  }
}
footer {
  color: #323233;
  // width: 100%;
  margin: 20px;
  padding: 20px;
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: 0;
  background-color: #fff;
  border-radius: 10px;
  h3 {
    font-weight: 700;
  }
  ul {
    li {
      i {
        margin-right: 10px;
      }
      line-height: 50px;
      #rIcon{
        margin-top: 20px;
        float: right;
        
      }
    }
    li:hover{
      background-color: #f6f7f9;
    }
  }
}
#outlogin {
  margin: 20px;
  margin-bottom: 0;
  color: red;
  text-align: center;
  display: block;
  // padding-bottom: 60px;
  background-color: #f6f7f9;
}
</style>